<template>
	<div>
		<div class="aa">
		  <div style="width: 65%">&nbsp;</div>
		  <ul>
		    <li v-if="this.$store.state.isLogin === true">
		      欢迎，{{ this.$store.state.username }}
		    </li>
		    <li v-if="this.$store.state.isLogin === false"></li>
		    <li v-if="this.$store.state.isLogin === true" @click="outLogin()">
		      退出登录
		    </li>
		    <li v-if="this.$store.state.isLogin === false" @click="gotoLogin()">
		      <i class="el-icon-user-solid"></i>&nbsp;&nbsp;&nbsp;&nbsp;登录
		    </li>
		    <li><i class="el-icon-key"></i>&nbsp;&nbsp;&nbsp;&nbsp;认证</li>
		  </ul>
		</div>

    <div v-for="(item,index) in resultlist.slice(index1,index2)">
      <br>
      <el-card shadow="hover" style="margin-left: 5%;margin-right: 4%;">
        <div slot="header" class="clearfix" style="height: 8px;" @click="jumpToAuthor(item)">
          <span style="font-size: 20px;font-weight:bold;">{{ item.name }}</span>
<!--          <div style="float: right;font-size: 15px;color: cornflowerblue">-->
<!--            <i class="el-icon-user-solid"></i>{{ item.author }}-->
<!--          </div>-->
        </div>
        <div style="font-size: 5px">
          <span style="font-weight: bold;">摘要:</span>
          <span>{{ item.summary }}</span>
        </div>
        <div class="text item">
          <span style="font-size: 10px;color: #1a0dab;"> 来源: </span> <!--{{ item.resource }} </span>-->
          <span style="font-size: 10px;color: #1a0dab;"> 发表时间： </span>
<!--          \{{ item.time }} </span>-->
          <span style="font-size: 10px;color: #1a0dab;"> 被引用量： </span>
<!--          {{ item.reference }} </span>-->
<!--          <el-button type="primary" icon="el-icon-s-flag"-->
<!--                     style="float: right; padding: 1px 2px;font-size: 15px;margin-left: 10px" @click="cite">-->
<!--            引用-->
<!--          </el-button>-->

<!--          <el-button type="primary" icon="el-icon-share"-->
<!--                     style="float: right; padding: 1px 2px;font-size: 15px;margin-left: 10px" @click="share">-->
<!--            分享-->
<!--          </el-button>-->
          <el-button type="primary" icon="el-icon-star-off"
                     style="float: right; padding: 1px 2px;font-size: 15px;" @click="collect">关注
          </el-button>
        </div>
      </el-card>
    </div>
	</div>
</template>

<script>
 export default{
   data(){
     return{
       index1:0,
       index2:6,
       resultlist:[]
     }


   },
   methods:{
     jumpToAuthor(item){
       this.$router.push('/author/'+item.id);
     },
     outLogin() {
       this.$store.state.isLogin = false;
       const self = this;
       this.isLogin = false;
       (this.$store.username = ""),
           (this.$store.useremail = ""),
           (this.$store.userphone = ""),
           self.axios({
             method: "post",
             url: "/outlogin/",
             data: {
               username: this.$store.state.username,
             },
             headers: {
               "X-CSRFToken": this.getCookie("csrftoken"),
             },
           });
       this.$store.state.username = "";
     },
     gotoLogin() {
       this.$router.push("/login");
     },
     getCookie(name) {
       var value = '; ' + document.cookie;
       var parts = value.split('; ' + name + '=');
       if (parts.length === 2) return parts.pop().split(';').shift();
     },
   },
   mounted() {
     let text = this.$route.params.text;
     const self = this;
     // function escape2Html(str) {
     //   var arrEntities = {
     //     'lt': '<',
     //     'gt': '>',
     //     'nbsp': ' ',
     //     'amp': '&',
     //     'quot': '"'
     //   };
     //   return str.replace(/&(lt|gt|nbsp|amp|quot);/ig, function (all, t) {
     //     return arrEntities[t];
     //   });
     // }

     self.axios({
       method: 'post',
       url: '/searchauthor/',
       data: {
         'keyword': text
       },
       headers: {
         'X-CSRFToken': this.getCookie('csrftoken')
       },
     }).then(res => {
       var obj1 = JSON.parse(res.data);
       this.search_num = obj1.time;
       var obj = obj1.result;
       //[['文件名','作者名',...],[],[]]
       for (let i = 0; i < obj.length; i++) {
         var temp = {
           name: obj[i][0],
           // author: obj[i][1],
           constitution: obj[i][1],
           id: obj[i][2],
         }
         this.resultlist.push(temp)
       }
     })
   }
 }
</script>

<style>
	.aa {
	  /* background-color: green; */
	  /* opacity: 0.5; */
	  height: 60px;
	  width: 100%;
	  /* top:0;
			position: fixed; */
	  /* border: solid ; */
	  color: #fff;
	  background-color: rgba(255, 255, 255, 0.15);
	  align-items: center;
	  display: flex;
	}
	.selectbox{
	  background: url("../assets/selector.png") no-repeat;
	}
	.result_sum {
	  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	  word-wrap: break-word;
	  word-break: break-word;
	  text-align: left;
	  font-size: 13px;
	  line-height: 23px;
	  color: #999;
	}
	
	.onleft {
	  margin-left: 6.5%;
	  width: 93.5%
	}
	
	.onright {
	  margin-left: 17%;
	  width: 83%
	}
	
	.shell {
	  position: absolute;
	  left: 0;
	  width: 6.5%;
	  height: 75vh;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  flex-direction: column;
	  background-color: rgb(17, 24, 39);
	  border-top-left-radius: 0em;
	  border-top-right-radius: 0em;
	  border-bottom-right-radius: 1em;
	  border-bottom-left-radius: 1em;
	  transition: .3s;
	  overflow: hidden;
	}
	
	.box {
	  height: 1%;
	  width: 85%;
	}
	
	.box {
	  display: block;
	  justify-content: center;
	  align-items: center;
	  height: 15%;
	  width: 85%;
	  margin: 9px;
	  border-radius: 5px;
	  position: relative;
	  transition: .3s;
	  color: rgb(160, 160, 175);
	}
	
	.box i {
	  font-size: 30px;
	  position: absolute;
	  margin: 15px 0 0 20px;
	  /* margin-left: 30%;
	margin-top: 30%; */
	}
	
	.box:nth-child(1) {
	  height: 0px;
	}
	
	.box:nth-child(1)::after,
	.box:nth-child(5)::before {
	  content: '';
	  display: block;
	  width: 100%;
	  height: 2px;
	  background-color: rgb(55, 65, 81);
	  position: absolute;
	  bottom: -10px;
	}
	
	.box span {
	  position: relative;
	  top: 30%;
	  left: 40%;
	  font-size: 15px;
	  opacity: 0;
	  transition: .1s;
	}
	
	.shell:hover {
	  width: 17%;
	}
	
	.shell:hover .contain {
	  margin-left: 200px;
	}
	
	.box:hover {
	  background-color: rgb(55, 65, 81);
	}
	
	.shell:hover span {
	  opacity: 1;
	}
	
	.box:hover {
	  color: #fff;
	}
	
	.shell:nth-child(2) {
	  background-color: rgb(243, 244, 246);
	}
	
	.shell:nth-child(2) .box:hover {
	  background-color: rgb(209, 213, 219);
	  color: rgb(135, 140, 241);
	}
	
	.shell:nth-child(2) .box {
	  color: #000;
	}
	
	.shell:nth-child(3) {
	  background-color: rgb(49, 46, 129);
	}
	
	.shell:nth-child(3) .box:hover {
	  background-color: rgb(67, 56, 202);
	}
	
	.shell:nth-child(3) .box {
	  color: rgb(140, 120, 240);
	}
	
	.inputBox input {
	  width: 100%;
	  padding: 10px 20px;
	  background: rgba(91, 91, 91, 0.2);
	  outline: none;
	  border: none;
	  border-radius: 30px;
	  border: 1px solid rgba(255, 255, 255, 0.5);
	  border-right: 1px solid rgba(255, 255, 255, 0.2);
	  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	  font-size: 16px;
	  letter-spacing: 1px;
	  color: #191919;
	  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	}
	
	.inputBox input:nth-child(2) {
	  justify-content: center;
	  align-items: center;
	}
	
	.inputBox input::placeholder {
	  color: #191919;
	}
	
	.inputBox input[type="submit"] {
	  background: #fff;
	  color: #666;
	  width: 75px;
	
	  /* margin-bottom: 20px; */
	  font-weight: 600;
	  cursor: pointer;
	}
	
	.logout {
	  background: rgba(91, 91, 91, 0.2);
	  outline: none;
	  border: none;
	  border-radius: 30px;
	  border: 1px solid rgba(255, 255, 255, 0.5);
	  border-right: 1px solid rgba(255, 255, 255, 0.2);
	  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	  font-size: 16px;
	  letter-spacing: 1px;
	  color: #191919;
	  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
	  background: #fff;
	  color: #666;
	  width: 100px;
	  /* margin-bottom: 20px; */
	  font-weight: 600;
	  cursor: pointer;
	}
	
	.scroll {
	  margin: auto;
	  overflow: auto;
	
	}
	
	.scroll::-webkit-scrollbar {
	
	  width: 10px;
	
	  height: 10px;
	
	}
	
	/*正常情况下滑块的样式*/
	
	.scroll::-webkit-scrollbar-thumb {
	
	  background-color: rgba(0, 0, 0, .05);
	
	  border-radius: 10px;
	
	  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
	
	}
	
	/*鼠标悬浮在该类指向的控件上时滑块的样式*/
	
	.scroll:hover::-webkit-scrollbar-thumb {
	
	  background-color: rgba(0, 0, 0, .2);
	
	  border-radius: 10px;
	
	  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
	
	}
	
	/*鼠标悬浮在滑块上时滑块的样式*/
	
	.scroll::-webkit-scrollbar-thumb:hover {
	
	  background-color: rgba(0, 0, 0, .4);
	
	  -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
	
	}
	
	/*正常时候的主干部分*/
	
	.scroll::-webkit-scrollbar-track {
	
	  border-radius: 10px;
	
	  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
	
	  background-color: white;
	
	}
	
	/*鼠标悬浮在滚动条上的主干部分*/
	
	.scroll::-webkit-scrollbar-track:hover {
	
	  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
	
	  background-color: rgba(0, 0, 0, .01);
	
	}
</style>
